<template>
   <el-header class="homeHeader">
    <img src="../../assets/logo1.png" alt="" class="logoIcon">
    <h3 style="float:left; margin-left:10px;height:69.6px;cursor: pointer;" @click="reloadPager">手表配件库存管理系统</h3>

      <div style="float:right; margin-right:10px" class="infoShow">
        <el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen>
            <i id="screenfull" class="el-icon-full-screen" @click="isScreenFull" style="margin-right:15px;cursor: pointer;" />
        </el-tooltip>       
        <i class="el-icon-user"></i>
        <el-dropdown style="margin-left:10px;color:#303030;cursor: pointer;" trigger="click">
        <span class="el-dropdown-link">
        欢迎您！{{Username}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-switch-button" @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="infoHide" style="float:right; margin-right:10px">
        <el-dropdown style="color:#303030;cursor: pointer;" trigger="click">
          <i class="el-icon-more-outline"></i>
          <el-dropdown-menu slot="dropdown">
             <el-dropdown-item icon="el-icon-switch-button" @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
      </div>
  </el-header>
</template>

<script>
import storage from '@/utils/storage'
import screenfull from "screenfull";
export default {
  name:'homeHeader',
  props: {

  },
  components: {
  },
  data() {
    return {
    
      isFullscreen: false
    };
  },
  created() {
  

  },
  mounted() {
    
  },
  methods: {
    //重新刷新页面
    reloadPager(){
      //location.reload()
     this.$router.replace('/')

    },

    // 退出登录，清除缓存数据
    loginOut(){
       this.$confirm('是否退出当前账号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'messageBox'
        }).then(() => {
           this.$utils.loginOut(this)
        }).catch(() => {  
        });
     
    },

     //全屏方法
    isScreenFull() {
      // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled就可以了

      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$utils.message.warning(this,'您的浏览器版本过低不支持全屏显示！')
        return false;
      }
      screenfull.toggle();
    }



  },
};
</script>

<style scoped lang="scss">

 .homeHeader {
    width: 100%;
    height: 69.6px !important;
    background-color: #fff;
    line-height: 70px;
    text-align: center;
    color: $PrimaryTextColor;
    box-shadow: 0 2px 4px 3px #f1f1f1;
    z-index: 3;
    color: $PrimaryColor;
}
.logoIcon {
    height:25px;
    width:25px;
    margin-left: 0px;
    float: left;
    margin-top: 21.5px;
    // -webkit-filter: grayscale(0%);
		// filter: grayscale(0%);
}

@media screen and (max-width: 500px) {
  .infoShow {
    display: none;
  }
  .infoHide {
    display: inline-block;
  }
  
}
@media screen and (min-width: 501px) {
  .infoShow {
    display: inline-block;
  }
  .infoHide {
    display: none;
  }
  
}

/deep/.el-badge__content.is-fixed {
  top: 25px;
  right: 24px;
}


</style>


